✨ feat(ui): 🎨 migrate from vanilla css to tailwind css, adopted next ui and restructured

2 files changed, 36 insertions, 142 deletions

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
deleted file mode 100644
index 66292e7..0000000
--- a/src/app/kdrama/[id]/buttons.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-"use client";

-import styles from "../styles/info.module.css";

-import getVideoLink from "../components/videoLink";

-import React, { useState } from "react";

-import { MediaPlayer, MediaProvider } from "@vidstack/react";

-import "@vidstack/react/player/styles/default/theme.css";

-import "@vidstack/react/player/styles/default/layouts/video.css";

-import {

-	defaultLayoutIcons,

-	DefaultVideoLayout,

-} from "@vidstack/react/player/layouts/default";

-

-export default function EpisodesButtons({ data: episodeData, id: dramaId }) {

-	const [videoLink, setVideoLink] = useState(null);

-

-	async function test(a, b) {

-		let link = await getVideoLink(a, b);

-		setVideoLink(link);

-	}

-

-	return (

-		<div>

-			<div className={styles.EpisodesContainer}>

-				<h2>Episodes</h2>

-				<div className={styles.EpisodeButtons}>

-					{episodeData && episodeData.length > 0 ? (

-						episodeData.map((item, index) => (

-							<button

-								title={item.title}

-								key={index}

-								onClick={(event) => {

-									test(item.id, dramaId, item.title);

-									event.currentTarget.style.backgroundColor =

-										"var(--soft-purple)";

-								}}

-							>

-								<p>{item.title}</p>

-							</button>

-						))

-					) : (

-						<p style={{ color: "white" }}>

-							No episodes are available at the moment but they

-							will be made available soon. Thank you for your

-							patience.

-						</p>

-					)}

-				</div>

-			</div>

-

-			{videoLink && (

-				<div

-					className={styles.videoPopUp}

-					id="popup"

-					onKeyDown={(event) => {

-						if (event.code === "Escape") {

-							setVideoLink("");

-						}

-					}}

-				>

-					<div className={styles.video}>

-						<MediaPlayer

-							title="dramaPlayer"

-							src={videoLink}

-							load="eager"

-							className={styles.VideoPlayer}

-							playsInline

-							id="videoPlayer"

-							volume={0.8}

-						>

-							<MediaProvider />

-							<DefaultVideoLayout icons={defaultLayoutIcons} />

-						</MediaPlayer>

-						<button

-							className={styles.closeButton}

-							onClick={() => {

-								setVideoLink("");

-							}}

-						>

-							Close

-						</button>

-					</div>

-				</div>

-			)}

-		</div>

-	);

-}

diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index 9cb3cd8..d94810e 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -1,66 +1,46 @@
-import styles from "../styles/info.module.css";

-import Image from "next/image";

-import EpisodesButtons from "./buttons";

-import { PreFetchVideoLinks } from "../components/cacher";

+import { Chip, Image } from "@nextui-org/react";

+import DescriptionTabs from "../components/infoTabs";

+import { dramaInfo } from "../components/requests";

+import EpisodesContainer from "../components/episodesContainer";

 

 export default async function DramaInfo({ params }) {

 	const id = decodeURIComponent(params.id);

-	const info = await getDramaInfo(id);

-

-	PreFetchVideoLinks(info.episodes, id);

+	const data = await dramaInfo(id);

 

 	return (

-		<div className={styles.Main}>

-			{info && (

-				<div className={styles.DramaInfoContainer}>

-					<div className={styles.TitleContainer}>

-						<p>{info.title}</p>

-						<Image

-							src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${info.image}`}

-							width={175}

-							height={256}

-							alt="Drama Poster"

-							priority

-						/>

-					</div>

-

-					{/* Drama description */}

-					<div className={styles.DramaDescription}>

-						<h2>Description</h2>

-						<p>{info.description}</p>

-					</div>

-

-					{/* Genres */}

-					<div className={styles.DramaGenre}>

-						<span className={styles.genreMain}>Genres: </span>

-						{info.genres &&

-							info.genres.map((item, index) => (

-								<p key={index}>{item}</p>

-							))}

-					</div>

-

-					{/* Other names */}

-					<div className={styles.DramaGenre}>

-						<span className={styles.genreMain}>AKA: </span>

-						{info.otherNames &&

-							info.otherNames.map((item, index) => (

-								<p key={index}>{item}</p>

+		<section className="pt-12  lg:w-9/12 m-auto">

+			<div className="flex items-center justify-center lg:justify-start md:justify-start">

+				<Image

+					isBlurred

+					width={190}

+					src={data.image.toString()}

+					alt="Anime Title Poster"

+					className="m-2"

+				/>

+				<div className="mx-5">

+					<h4 className={`text-2xl`}>

+						<strong>{data.title}</strong>

+					</h4>

+					<div className="mt-1">

+						{data.genres &&

+							data.genres.map((item, index) => (

+								<Chip

+									key={index}

+									color="warning"

+									variant="faded"

+									className="mr-1 mb-1"

+								>

+									<p className="text-xs">{item}</p>

+								</Chip>

 							))}

 					</div>

-

-					{/* Episodes Buttons */}

-					<EpisodesButtons data={info.episodes} id={id} />

 				</div>

-			)}

-		</div>

-	);

-}

-

-async function getDramaInfo(id) {

-	const res = await fetch(

-		`https://consumet-jade.vercel.app/movies/dramacool/info?id=${id}`,

-		{ next: { revalidate: 21600 } }

+			</div>

+			<DescriptionTabs data={data} />

+			<EpisodesContainer data={data} />

+			<br />

+			<br />

+			<br />

+		</section>

 	);

-	const data = await res.json();

-	return data;

 }